<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>历史翻译</title>
</head>
<link rel="stylesheet" href="../Common/Base.css">
<link rel="stylesheet" href="../Common/SideNavigation.css">
<link rel="stylesheet" href="./HistoricalTran.css">

<body>
  <!-- 侧导航 -->
  <div class="side-nav">
    <ul>
      <li><a href="../templates/index.html">AI翻译</a></li>
      <li><a href="../AIDialogue/AIDialogue.html">AI问答</a></li>
      <li><a href="#" class="side-nav-active">历史翻译</a></li>
      <li><a href="https://gitee.com/Himi233/aitranslation.git" target="_blank">关于我们</a></li>
    </ul>
  </div>
  <!-- 翻译文本页面 -->
  <div class="wrapper">
    <div class="container">
      <h2>历史翻译</h2>
      <button onclick="clearHistory()">清空历史</button>
      <ul id="historyList">
        <!-- 历史记录将在这里动态生成 -->
      </ul>
      <!-- 模态弹窗 -->
      <div id="historyModal" class="modal" style="display: none;">
        <div class="modal-content">
          <span class="close">&times;</span>
          <p id="modalText"></p>
        </div>
      </div>
    </div>
  </div>

  <script src="./HistoricalTran.js"></script>
</body>

</html>